<template>
	<view class="index">
		<view>
			<u-swiper :list="homeBanner" keyName="logoPicAddress" :autoplay="false" height="418rpx" radius="0"
				bg-color="rgb(255, 140, 114)" :circular="true" />
		</view>

		<view class="home">
			<!-- 黄金区 -->
			<view class="golden-zone">
				<!-- <view class="indicator-dots" :style="'width:'+(tabbar.length*50)+'rpx;'">
					<view :style="'margin-left:'+(currentIndex*50)+'rpx;'" class="indicator-dots-scroll"></view>
				</view> -->

				<view class="home-swiper-item app-pages">
					<view class="tab-bar">
						<view class="tab-bar-item" v-for="(item,index) in tabbar" :key="item.id"
							@click="handleRouter(item)">
							<view width="80rpx" height="80rpx">
								<u--image :showLoading="true" :src="item.icon" width="80rpx" height="80rpx" />
							</view>
							<text class="tab-bar-item-text">{{item.name}}</text>
						</view>
						<view class="tab-bar-item" style="height: 0;opacity: 0;" v-for="(item,index) in 5" :key="index">
						</view>
					</view>
				</view>
			</view>

			<view style="margin-top:24rpx;" class="btn-banner">
				<u-swiper :list="heatListData" keyName="logoPicAddress" @change="e => currentNum = e.current"
					@click="e=> handleHeat(heatListData[e])" :autoplay="false" height="228rpx" imgMode="aspectFill"
					bg-color="rgb(248, 248, 248)" :circular="true"
					indicatorStyle="left: 50%;transform: translate(-50%, 0px);bottom: 0rpx;">
					<view slot="indicator" class="indicator-num">
						<view class="indicator__dot" v-for="(item, index) in heatListData" :key="index"
							:class="[index === currentNum && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>

			<view class="notice_b app-pages" @click="handleNoticeClick">
				<view class="notice_b_title">
					<image class="notice_b_title_icon" src="/static/icon/home/tzicon.png" mode=""></image>
					<text class="notice_b_title_text">通知</text>
				</view>
				<view class="notice_bar">
					<u-notice-bar :text="activityText" bg-color="rgb(248, 248, 248)" font-size="14" color="#666666"
						icon=" "></u-notice-bar>
				</view>
			</view>
		</view>

		<view class="app-pages">
			<!-- 就餐人数 -->
			<home-template5 ref="home-template5"></home-template5>
			<!-- 梅地亚中心 -->
			<blockquote style="margin-top: 32rpx;"></blockquote>
			<home-template1 ref="home-template1"></home-template1>
			<!-- 中塔 -->
			<blockquote style="margin-top: 32rpx;"></blockquote>
			<home-template2 ref="home-template2"></home-template2>
			<!-- 租车和服化 -->
			<blockquote style="margin-top: 32rpx;"></blockquote>
			<home-template3 ref="home-template3"></home-template3>
			<!-- 精品文创 -->
			<!-- 			<blockquote style="margin-top: 32rpx;"></blockquote>
			<home-template4 ref="home-template4"></home-template4> -->
		</view>
		<u-popup :show="show" mode="center">
			<view class="popup">
				<u-cell :border="false">
					<view class="" slot="value" style="text-align: center;">
						<u-icon @click="cancel" name="close-circle" size="60rpx" color="rgb(144, 147, 153)"></u-icon>
					</view>
				</u-cell>
				<view class="popup-form" style="width: 100%;">
					<p><img style="width:100%;height: 1100rpx;" :src="showImagePath"></p>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showBannerImage" mode="center" :zoom="true" bgColor="transparent" :customStyle="{
			width: '700rpx', height: '700rpx' }">
			<view class="popup-banner-image">
				<view class="popup-banner-image-box-close">
					<u-icon @click="showBannerImage = false" name="close-circle" size="60rpx"
						color="rgb(144, 147, 153)"></u-icon>
				</view>
				<image :src="showImagePath" class="image" mode="aspectFit"></image>
			</view>
		</u-popup>

		<empower @login-success="empowerSuccess" @cancel="empowerShow=false" v-if="empowerShow"></empower>
	</view>
</template>

<script>
	import {
		login,
		heatList,
		realmName,
		goodDeatils,
		noticeList,
		userAccessLink,
		restaurantConfigList,
		restaurantConfigListType2,
		dictActivityProductType
	} from "@/http";
	import {
		dateFormat
	} from "@/utils/pay.js";
	import empower from "@/components/empower";
	import homeTemplate1 from "@/components/home/template1";
	import homeTemplate2 from "@/components/home/template2";
	import homeTemplate3 from "@/components/home/template3";
	import homeTemplate4 from "@/components/home/template4";
	import homeTemplate5 from "@/components/home/template5";
	export default {
		name: 'Home',
		components: {
			empower,
			homeTemplate1,
			homeTemplate2,
			homeTemplate3,
			homeTemplate4,
			homeTemplate5
		},
		data() {
			return {
				userInfo: {},
				realmName,
				empowerShow: false,
				activityText: '',
				content: '',
				tabbar: [{
						name: '就餐码',
						icon: '/static/icon/home/eact.png',
						webview: true,
						status: 2, //类别
						id: 6,
						power: ['3'], //权限
						check: true
					},
					{
						name: '总台服化',
						icon: '/static/icon/home/fuhua.png',
						id: 4, //22
						power: [], //权限
						check: true
					},
					{
						name: '梅地亚',
						icon: '/static/icon/home/kied.png',
						path: '/homePages/hotel/index',
						power: ['1', '2', '3'], //权限
						id: 11,
						check: false
					},
					{
						name: '	中塔旅游',
						icon: '/static/icon/home/watch.png',
						path: '/homePages/scenicSpot/selector',
						power: ['1', '2', '3'], //权限
						id: 12,
						check: false
					},
					{
						name: '总台租车',
						icon: '/static/icon/home/zuche.png',
						id: 21, //21
						path: "/homePages/carRental/index",
						power: ['1', '2', '3'], //权限
						check: false
					},
					{
						name: '总台文创',
						icon: '/static/icon/home/homeed.png',
						path: '/culturalCreativity/index',
						id: 14,
						power: ['1', '2', '3'],
						check: true
					},
					{
						name: '福礼商城',
						icon: '/static/icon/home/show.png',
						id: 3,
						power: ['2'],
						check: true
					},
					{
						name: '后勤预订',
						icon: '/static/icon/home/home.png',
						path: '/homePages/shopping/index',
						webview: true,
						id: 1,
						status: 4, //类别
						power: ['3'],
						check: true
					},
					{
						name: '每周菜谱',
						icon: '/static/icon/home/food.png',
						path: '/homePages/menus/index',
						webview: true,
						id: 2,
						status: 3, //类别
						power: ['3'],
						check: true
					},
					{
						name: '取餐码',
						icon: '/static/icon/home/goes.png',
						webview: true,
						status: 1, //类别
						id: 5,
						power: ['3'], //权限
						check: true
					},
				],
				heatListData: [],
				homeBanner: [],
				currentIndex: 0,
				currentNum: 0,
				activityProductTypeData: [],
				show: false,
				showBannerImage: false,
				showImagePath: ""
			}
		},
		async onShow() {
			this.empowerShow = false;
			if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
				this.$scope.getTabBar().setData({
					selected: 0
				})
			};
		},
		async onLoad() {
			this.getNumberOfDiners();
		},
		methods: {
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			handleNoticeClick() {
				uni.navigateTo({
					url: `/homePages/notice/index`
				});
			},
			async getNumberOfDiners() {
				uni.showLoading({
					title: "加载中...",
					mask: false,
				});
				await login(); //登录
				await this.getInfo();
				let res1 = await restaurantConfigList(); //获取首页配置
				let res2 = await restaurantConfigListType2(); //获取首页轮播
				let res3 = await dictActivityProductType(); //字典
				this.activityProductTypeData = res3.data.data;
				this.homeBanner = res2.data.rows.map(item => {
					item.logoPicAddress = realmName + item.logoPicAddress;
					return item;
				});
				this.activeTemplate(res1.data.rows);
				uni.hideLoading();
			},
			activeTemplate(options) {
				this.$nextTick(() => {
					this.$refs['home-template5'].init(options);
					this.$refs['home-template1'].init(options);
					this.$refs['home-template2'].init(options);
					this.$refs['home-template3'].init(options);
					// this.$refs['home-template4'].init(options);
				});
			},
			async getInfo() { //获取信息
				let heatData = await heatList({ //活动热门列表
					pageNum: 1,
					pageSize: 999,
					configType: 3,
					status: 1
				});
				this.heatListData = heatData.data.rows.map(item => {
					item.logoPicAddress = realmName + item.logoPicAddress;
					return item;
				});
				let noticeData = await noticeList(); //通知列表
				if (noticeData.data.rows && noticeData.data.rows.length) this.activityText = noticeData.data.rows[0]
					.noticeTitle;
				return;
			},
			async handleHeat(options) { //热门活动
				// console.log('查看参数：', options)
				let phone = uni.getStorageSync('phone');
				if (Number(options.activityType) == 3) { //展示图片
					this.showImagePath = realmName + options.jumpLink;
					this.showBannerImage = true;
					return;
				}
				if (Number(options.activityType) == 2) { //热销商品
					uni.showLoading({
						title: '正在跳转...',
						mask: true
					});
					let url = this.activityProductTypeData.reduce((pev, next) => {
						if (Number(next.dictValue) == Number(options.storeIds)) {
							pev = next.remark;
						};
						return pev;
					}, ''); // 默认跳转地址
					if ([2, 3, 4, 5, 6, 7].some(item => item == Number(options.storeIds))) {
						if (!options.goodsIds) {
							uni.hideLoading();
							return uni.navigateTo({
								url
							});
						}
					}
					
					if (Number(options.storeIds) == 2) { //总台服化
						uni.navigateTo({
							url: `homePages/dressUp/listDetails?id=${options.goodsIds}`
						});
						uni.hideLoading();
					}
					
					if (Number(options.storeIds) == 5) { //中塔门票
						let res = await this.$http.getuselist({
							pageNum: 1,
							pageSize: 99,
							proDate: dateFormat("YYYY-mm-dd", new Date()),
						});
						let data = res.data.rows.reduce((pev, next) => {
							if (next.productCode == options.goodsIds) {
								pev = next;
							}
							return pev
						}, {});
						uni.navigateTo({
							url: `/homePages/scenicSpot/reserve?data=${JSON.stringify(data)}&date=${dateFormat("YYYY-mm-dd",new Date())}`
						});
						uni.hideLoading();
					}

					if (Number(options.storeIds) == 3) { //酒店详情
						let endDate = new Date();
						endDate.setDate(endDate.getDate() + 1);
						let res = await goodDeatils(options.goodsIds);
						let data = {
							"time": [dateFormat('YYYY-mm-dd', new Date()), dateFormat('YYYY-mm-dd', endDate)],
							"goodsName": res.data.data.goodsName,
							"goodsId": res.data.data.goodsId,
							"standards": res.data.data.standards,
							"maxInventory": res.data.data.maxInventory,
							"sellingPrice": res.data.data.sellingPrice,
							"outTime": dateFormat('YYYY-mm-dd', endDate),
							"inTime": dateFormat('YYYY-mm-dd', new Date()),
							"imageUrl": this.realmName + res.data.data.f1
						}
						uni.hideLoading();
						return uni.navigateTo({
							url: '/homePages/hotel/reserve?options=' + JSON.stringify(data)
						});
					}
				}
				if (Number(options.activityType) == 1) { //福利商城
					if (!phone) return this.empowerShow = true;
					this.$http.getjdurl({
						configId: options.configId,
						phone,
						returnUrl: "index"
					}).then(res => {
						uni.setStorageSync("webview_url", res.data.data);
						uni.navigateTo({
							url: "/webview/index"
						})
					});
				}
			},
			empowerSuccess() {
				this.userInfo = uni.getStorageSync('userInfo') || {};
				this.empowerShow = false;
			},
			cancel() {
				this.show = false;
			},
			async handleRouter(options) {
				if (options.id == 21) {
					this.showImagePath =
						"http://39.105.85.75:61500/profile/upload/2023/08/10/222_20230810164210A012.jpg"
					this.show = true;
					return
				}
				// if (options.id == 14) return uni.showToast({
				// 	title: "内容敬请期待",
				// 	icon: "none"
				// });
				let userInfo = uni.getStorageSync('userInfo') || {};
				let phone = uni.getStorageSync('phone');
				let power = uni.getStorageSync('power');
				/**** 权限判断 ****/
				if (options.check) {
					if (!userInfo || !userInfo.phone) return this.empowerShow = true;
				} else if (options.id != 11 && options.id != 12) { //梅地亚酒店 中塔旅游 需要获取手机号
					if (!phone) return this.empowerShow = true;
				};
				if (!power) return uni.showToast({
					title: "当前没有权限",
					icon: "error"
				});
				if (!options.power.some(item => power.indexOf(item) != -1)) return uni.showToast({
					title: "当前没有权限",
					icon: "error"
				});
				/**** 权限判断 ****/
				if (options.webview) { //走接口跳转
					uni.showLoading({
						title: '加载中...'
					});
					let resLink = await userAccessLink(options.status);
					uni.setStorageSync("webview_url", resLink.data.data);
					uni.hideLoading();
					return uni.navigateTo({
						url: "/webview/index"
					});
				}
				if (options.id == 3) {
					this.$http.getjdurl({
						phone,
						returnUrl: "index"
					}).then(res => {
						uni.setStorageSync("webview_url", res.data.data);
						uni.navigateTo({
							url: "/webview/index"
						})
					})
				}
				if (options.path) uni.navigateTo({
					url: options.path
				})
			},
		},
		mounted() {},
	}
</script>


<style lang="scss" scoped>
	::v-deep .btn-banner .u-swiper__wrapper__item__wrapper {
		padding: 0 30rpx;
	}

	::v-deep .btn-banner .u-swiper__wrapper__item__wrapper__image {
		height: 186rpx !important;
		border-radius: 12rpx !important;
	}

	::v-deep .u-notice-bar {
		padding: 0px !important;
	}

	.popup-banner-image {
		$w:700rpx;
		position: relative;
		width: $w;
		height: $w;
		margin: 0 auto;
		.popup-banner-image-box-close {
			position: absolute;
			right: 14rpx;
			top: 14rpx;
		}
		.image {
			width: $w;
			height: $w;
		}
	}

	.indicator-num {
		display: flex;

		.indicator__dot {
			height: 10rpx;
			width: 32rpx;
			border-radius: 6rpx;
			background-color: #DDDDDD;
			transition: all .3s;

			&+.indicator__dot {
				margin-left: 12rpx;
			}
		}

		.indicator__dot--active {
			background-color: #FF9800;
		}
	}


	.notice_b {
		display: flex;
		align-items: center;
		margin: 32rpx 0 24rpx 0;

		.notice_bar {
			flex: 1;
		}

		.notice_b_title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #000000;

			.notice_b_title_icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}

			.notice_b_title_text {
				font-weight: bold;
			}
		}
	}

	.golden-zone {
		//黄金区
		position: relative;
		border-radius: 0 0 100rpx 100rpx;
		background: rgb(255, 140, 114);

		.indicator-dots {
			position: absolute;
			width: 50rpx;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			height: 8rpx;
			background-color: #cccccc;
			border: 1px solid #f2f2f2;
			border-radius: 8rpx;
			overflow: hidden;
		}

		.indicator-dots-scroll {
			border-radius: 8rpx;
			transition: all .3s;
			width: 50rpx;
			height: 100%;
			background-color: #F7F7F7;
		}

		.home-swiper-item {
			background-color: #FFFFFF;
			border-radius: 30rpx;
		}
	}

	.heat {
		display: flex;

		.heat-item {
			padding-left: 30rpx;
			width: 100%;
			box-sizing: border-box;

			.heat-item-image {
				width: 100%;
				height: 340rpx;
				border-radius: 30rpx;
			}

			&:nth-last-of-type(1) {
				padding-right: 30rpx;
			}
		}
	}

	.index {
		min-height: 100vh;
		width: 100vw;
		padding-bottom: 100rpx;
		overflow: hidden;
		background-color: rgb(248, 248, 248);
	}

	.demo-layout {
		.title {
			margin-bottom: 15rpx;
			font-weight: bold;
			font-size: 36rpx;
			margin: 40rpx 0 30rpx;
		}

		.titles {
			margin-bottom: 15rpx;
			font-weight: bold;
			font-size: 14px;
		}

		.hot-list {
			.hot-list-item {
				margin-bottom: 20rpx;
				padding-bottom: 30rpx;
				border-radius: 10rpx;
				overflow: hidden;

				.hot-list-item-title {
					font-size: 32rpx;
					color: black;
					margin: 15rpx 0;
				}

				.hot-list-item-content {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;

					.hot-list-item-pirce {
						color: #d9001b;
						font-size: 30rpx;
					}

					.hot-list-item-numb {
						color: #666666;
						font-size: 28rpx;
					}
				}
			}
		}

		.quick-list,
		.hot-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	.title-background {
		width: 100%;
		height: 418rpx;
		display: block;
	}

	.home {
		margin-top: -6rpx;

		.tab-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 10rpx;

			.tab-bar-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 120rpx;
				padding-top: 40rpx;

				.tab-bar-item-text {
					font-size: 28rpx;
					margin-top: 15rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		}

	}

	/deep/ .u-popup__content {
		width: 100%;
		height: 80%;
	}

	/deep/ .u-mode-center-box {
		background-color: transparent !important;
	}
</style>
